<template>
  <div class="queue">
    <arrow />
    <div class="list">
      <div class="item" :class="{'done' : +item.status === 1}" v-for="(item, index) in list" :key="index">
        <div class="desc">
          <!--<div class="n">第<span>{{ index + 1 }}</span>位</div>-->
          <div class="n">{{ item.status | statusText }}</div>
          <div class="info" v-if="item.user">
            <div class="image">
              <img :src="item.user.avatar" />
            </div>
            <div class="right">
              <div class="name">{{ item.user.nickname }}</div>
              <div class="mobile">{{ item.user.mobile | mobileText }}</div>
            </div>
          </div>
        </div>
        <div class="t">
          <div class="amount">消费金额: <span>{{ +item.amount }}</span></div>
          <div class="x">沉淀金额: <span>{{ +item.real_amount }}</span></div>
        </div>
        <div class="time">排队时间: {{ item.create_time }}</div>
      </div>
    </div>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      @loadMore="loadMore" />
    <div class="nothing" v-if="list.length === 0">正在排队中...</div>
    <div class="btn">
      <cube-button @click="$router.push(`/user/shop-pay/${$route.params.id}`)">我要消费排队</cube-button>
    </div>
    <div class="total">奖金池: <span>{{ total }}</span></div>
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import Arrow from '@/components/Arrow'
import PullUp from '@/components/PullUp'
export default {
  components: {
    Arrow,
    PullUp
  },
  filters: {
    mobileText(v) {
      return v ? v.substring(0, 3) + '****' + v.substring(7) : ''
    },
    statusText(v) {
      return +v === 1 ? '已返' : '排队中'
    }
  },
  computed: {
  },
  data() {
    return {
      list: [],
      queryList: {
        page: 0,
        pageSize: 10,
        busy: false
      },
      total: 0,
      loading: false,
      id: 0
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Uni.queueScan({ ...this.queryList, id: this.id }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.total = data.total
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          // console.log(this.list)
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created() {
    this.id = this.$route.params.id || 0
    this.getList()
  },
  deactivated () {
    // this.queryList.busy = true
  }
}
</script>

<style scoped lang="stylus">
.queue
  .total
    position fixed
    top 0
    left 0
    right 0
    background $main_color
    height 50px
    line-height 50px
    color white
    font-size 18px
    span
      font-weight 700
      font-size 20px
  .btn
    position fixed
    bottom 50px
    left 0
    right 0
  .list
    padding-bottom 50px
    margin-top 60px
    .item
      background white
      margin-bottom 10px
      padding 10px 0
      &.done
        background #fbab72
        color white
        .desc
          .n
            color white
            font-weight 700
            font-size 20px
        .t
          .amount
            color white
            font-size 18px
      .desc
        display flex
        align-items center
        .n
          width 80px
          span
            font-size 20px
            font-weight 700
            margin 0 5px
        .info
          flex 1
          display flex
          align-items center
          .image
            width 80px
            padding 10px
            img
              //width 60px
              //height 60px
              border-radius 50%
          .right
            flex 1
            text-align left
            div
              letter-spacing 1px
              line-height 25px
              overflow hidden
              &.name
                font-size 16px
      .t
        //background red
        display flex
        justify-content space-between
        align-items center
        height 35px
        padding 0 10px
        .amount
          color red
          span
            font-size 16px
            font-weight 700
      .time
        color #666
        height 30px
        line-height 30px
        text-align right
        padding-right 10px
</style>
